<template>
  <span class="copyText" @click="dealCopy" >
    <span class="copy_slot" ref="textInstance"> <slot></slot></span>
    <span class="c_copy" >
      <slot name="btn">
        <CopyOutlined />
        复制</slot
      >
    </span>
  </span>
</template>
<script setup lang="ts">
import { message } from "ant-design-vue";
import { CopyOutlined } from "@ant-design/icons-vue";
import { ref } from "vue";

const textInstance = ref<HTMLElement>();
const dealCopy = () => {
  copy(textInstance.value?.innerText || "");
};
const copy = (content: string) => {
  // console.log(content);
  // content为要复制的内容
  // 创建元素用于复制
  const ele = document.createElement("input");
  // 设置元素内容
  ele.setAttribute("value", content);
  // 将元素插入页面进行调用
  document.body.appendChild(ele);
  // 复制内容
  ele.select();
  // 将内容复制到剪贴板
  document.execCommand("copy");
  // 删除创建元素
  document.body.removeChild(ele);
  message.success("已拷贝到剪贴板");
};
</script>
<script lang="ts">
export default {
  name: "x-copy",
};
</script>
<style lang="scss" scoped>
.copyText {
  cursor: pointer;
  position: relative;
  &:hover {
    .copy_slot {
      background-color: #e9f0fe;
    }
    .c_copy {
      opacity:1;
    }
  }
}
.c_copy {
  color: blue;
  margin-left: 10px;
  cursor: pointer;
  position: absolute;
  right: -50px;
  opacity: 0;
  transition: all 0.4s;
}
</style>
